<!-- ================================================ -->
<!-- FILE: mcpo_control_panel/ui/templates/mcpo_settings_form.html -->
<!-- (Manual Configuration Mode switch REMOVED, status displayed) -->
<!-- ================================================ -->
{% extends "base.html" %}

{% block title %}MCPO Settings - MCP Manager{% endblock %}
{% block page_title %}MCPO Settings{% endblock %}
{% block page_subtitle %}Configuration of mcpo server startup parameters and manager interface{% endblock %}

{% block head_extra %}
<style>
    /* ... (existing styles can remain, but remove specific styles for #manual-config-editor-block if they are too specific) ... */
    .input-field-with-switch {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .input-field-with-switch .input-part {
        flex-grow: 1;
        min-width: 200px;
        margin-right: 20px;
    }
    .input-field-with-switch .switch-part {
        flex-shrink: 0;
        margin-top: 15px;
    }
     .main-switch-row { /* Can be repurposed or removed if not used */
        display: flex;
        align-items: center;
        margin-bottom: 15px;
     }
     .main-switch-row .switch {
        margin-right: 15px;
     }
      .main-switch-row p.caption {
         margin-top: 0;
         margin-bottom: 0;
         flex-grow: 1;
      }
    .card-content .row {
        margin-bottom: 10px;
    }
     .card-content .row:last-child {
        margin-bottom: 0;
    }
    .input-field .helper-text {
        margin-top: 2px;
    }
    .health-check-info {
        margin-top: 20px;
        padding: 10px 12px;
        background-color: rgba(0,0,0, 0.05);
        border-radius: 3px;
        border-left: 3px solid #607d8b;
        font-size: 0.85rem;
    }
     .health-check-info i {
        vertical-align: middle;
        margin-right: 5px;
        font-size: 1.1em;
     }
     .health-check-info code {
         background-color: rgba(0,0,0, 0.1);
         padding: 1px 4px;
         border-radius: 2px;
     }
     .readonly-setting-display {
        padding: 10px 0px;
        font-size: 1rem;
        color: #212121; /* Default text color */
     }
     .readonly-setting-display strong {
        font-weight: 500;
        color: #546e7a; /* blue-grey darken-1 */
     }
     .readonly-setting-display .status-value {
        font-weight: bold;
        color: #00796b; /* Teal for enabled */
     }
     .readonly-setting-display .status-value.disabled {
        color: #757575; /* Grey for disabled */
     }
      .readonly-setting-display .note {
        display: block;
        font-size: 0.85rem;
        color: #757575;
        margin-top: 3px;
      }
</style>
{% endblock %}


{% block content %}

{% if error %}
<div class="card-panel red lighten-3 black-text">
    <strong><i class="material-icons left tiny">error_outline</i>Error:</strong> {{ error }}
</div>
{% endif %}

{% if success %}
<div class="card-panel green lighten-3 black-text">
    <strong><i class="material-icons left tiny">check_circle_outline</i>Success:</strong> {{ success }}
</div>
{% endif %}

<div class="row">
    <form class="col s12" method="post" action="{{ url_for('ui_update_mcpo_settings') }}">
        <!-- Core MCPO Settings -->
        <div class="card">
            <div class="card-content">
                <span class="card-title grey-text text-darken-1" style="margin-bottom: 20px;">Core MCPO Settings</span>
                <div class="row">
                    <div class="input-field col s12 m6">
                        <i class="material-icons prefix">settings_input_antenna</i>
                        <input type="number" id="port" name="port" value="{{ settings.port if settings else 8000 }}" required min="1024" max="65535" class="validate">
                        <label for="port">MCPO Port (local)</label>
                        <span class="helper-text">Port for running the mcpo server on this machine (1024-65535).</span>
                    </div>
                    <div class="input-field col s12 m6">
                        <i class="material-icons prefix">public</i>
                        <input type="url" id="public_base_url" name="public_base_url" value="{{ settings.public_base_url if settings and settings.public_base_url is not none else '' }}" placeholder="e.g., http://your.domain.com:8000">
                        <label for="public_base_url">Public Base URL (optional)</label>
                        <span class="helper-text">URL for external links. If empty, http://127.0.0.1:PORT is used.</span>
                    </div>
                </div>
                <div class="row input-field-with-switch">
                     <div class="input-field input-part col s12 m8">
                        <i class="material-icons prefix">key</i>
                        <input type="text" id="api_key" name="api_key" value="{{ settings.api_key if settings and settings.api_key is not none else '' }}">
                        <label for="api_key">MCPO API Key (optional)</label>
                         <span class="helper-text">Key for protecting endpoints (Bearer token).</span>
                    </div>
                    <div class="switch-part col s12 m4">
                         <div class="switch">
                            <label>
                                Off
                                <input type="checkbox" id="use_api_key" name="use_api_key" value="true" {% if settings and settings.use_api_key %}checked{% endif %}>
                                <span class="lever"></span>
                                Use API Key
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">description</i>
                        <input type="text" id="config_file_path" name="config_file_path" value="{{ settings.config_file_path if settings else 'mcp_generated_config.json' }}" required class="validate">
                        <label for="config_file_path">MCPO Configuration File Path</label>
                        <span class="helper-text">Filename for the MCPO config (relative to data dir). Used for generated or manual config.</span>
                    </div>
                </div>
                 <div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">assignment</i>
                        <input type="text" id="log_file_path" name="log_file_path" value="{{ settings.log_file_path if settings and settings.log_file_path is not none else '' }}">
                        <label for="log_file_path">MCPO Log File Path (optional)</label>
                        <span class="helper-text">Filename for mcpo process logs (relative to data dir). If empty, logs go to stdout/stderr.</span>
                    </div>
                </div>

                 <!-- Display Manual Configuration Mode Status (Read-Only) -->
                <div class="row" style="margin-top: 20px;">
                    <div class="col s12 readonly-setting-display">
                        <strong>Manual Configuration Mode:</strong>
                        {% if settings and settings.manual_config_mode_enabled %}
                            <span class="status-value"><i class="material-icons tiny left">toggle_on</i>Enabled</span>
                        {% else %}
                            <span class="status-value disabled"><i class="material-icons tiny left">toggle_off</i>Disabled</span>
                        {% endif %}
                        <span class="note">This setting is managed on the main "Servers & MCPO Control" page.</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Log Display Settings -->
        <div class="card" style="margin-top: 20px;">
             <div class="card-content">
                <span class="card-title grey-text text-darken-1" style="margin-bottom: 20px;">Log Display in Manager</span>
                 <div class="row input-field-with-switch">
                    <div class="input-field input-part col s12 m7">
                        <i class="material-icons prefix">timer</i>
                        <input type="number" id="log_auto_refresh_interval_seconds" name="log_auto_refresh_interval_seconds"
                               value="{{ settings.log_auto_refresh_interval_seconds if settings else 5 }}"
                               required min="5" max="3600" class="validate">
                        <label for="log_auto_refresh_interval_seconds">Auto-Refresh Interval (sec)</label>
                        <span class="helper-text">How often to refresh logs on the logs page (5-3600 sec).</span>
                    </div>
                     <div class="switch-part col s12 m5">
                         <div class="switch">
                            <label>
                                Auto-Refresh Off
                                <input type="checkbox" id="log_auto_refresh_enabled" name="log_auto_refresh_enabled"
                                       value="true" {% if settings and settings.log_auto_refresh_enabled %}checked{% endif %}>
                                <span class="lever"></span>
                                Auto-Refresh On
                            </label>
                        </div>
                    </div>
                 </div>
            </div>
        </div>

        <!-- Health Check Settings -->
        <div class="card" style="margin-top: 20px;">
            <div class="card-content">
                <span class="card-title grey-text text-darken-1" style="margin-bottom: 20px;">MCPO Health Check & Auto-Restart</span>
                 <div class="row main-switch-row">
                     <div class="switch">
                        <label>
                            Off
                            <input type="checkbox" id="health_check_enabled" name="health_check_enabled"
                                   value="true" {% if settings and settings.health_check_enabled %}checked{% endif %}>
                            <span class="lever"></span>
                            On
                        </label>
                    </div>
                     <p class="caption grey-text text-darken-1">
                         Enable periodic checking of MCPO availability via an echo request.
                     </p>
                </div>
                 <div id="health-check-manual-mode-note-settingspage" class="card-panel amber lighten-4 blue-grey-text text-darken-3 manual-mode-warning" style="padding: 8px 12px; font-size: 0.9em; display:none; margin-bottom:10px;">
                    <i class="material-icons left tiny">info_outline</i>
                    Note: If Manual Configuration Mode is enabled (on main page), ensure the echo server (<code>{{ settings.INTERNAL_ECHO_SERVER_NAME }}</code>) is correctly defined in your JSON for health checks to function.
                </div>
                <div class="row">
                    <div class="input-field col s12 m6">
                        <i class="material-icons prefix">timer</i>
                        <input type="number" id="health_check_interval_seconds" name="health_check_interval_seconds"
                               value="{{ settings.health_check_interval_seconds if settings else 10 }}"
                               required min="5" class="validate">
                        <label for="health_check_interval_seconds">Check Interval (sec)</label>
                        <span class="helper-text">Check frequency on success (minimum 5 sec).</span>
                    </div>
                    <div class="input-field col s12 m6">
                        <i class="material-icons prefix">error_outline</i>
                        <input type="number" id="health_check_failure_attempts" name="health_check_failure_attempts"
                               value="{{ settings.health_check_failure_attempts if settings else 3 }}"
                               required min="1" class="validate">
                        <label for="health_check_failure_attempts">Attempts Before Restart</label>
                        <span class="helper-text">Consecutive failures before restart (minimum 1).</span>
                    </div>
                </div>
                <div class="row input-field-with-switch">
                    <div class="input-field input-part col s12 m7">
                        <i class="material-icons prefix">replay</i>
                        <input type="number" id="health_check_failure_retry_delay_seconds" name="health_check_failure_retry_delay_seconds"
                               value="{{ settings.health_check_failure_retry_delay_seconds if settings else 5 }}"
                               required min="1" class="validate">
                        <label for="health_check_failure_retry_delay_seconds">Delay on Failure (sec)</label>
                        <span class="helper-text">Pause between failed checks (minimum 1 sec).</span>
                    </div>
                     <div class="switch-part col s12 m5">
                         <div class="switch">
                            <label>
                                Restart Off
                                <input type="checkbox" id="auto_restart_on_failure" name="auto_restart_on_failure"
                                       value="true" {% if settings and settings.auto_restart_on_failure %}checked{% endif %}>
                                <span class="lever"></span>
                                Auto-Restart On
                            </label>
                        </div>
                         <p class="caption grey-text text-darken-1" style="font-size:0.8rem; margin-top: 5px;">
                             Restart mcpo if checks fail.
                         </p>
                    </div>
                </div>
                <div class="health-check-info grey-text text-lighten-1">
                    <i class="material-icons tiny">info_outline</i>
                    <span>The check uses the built-in echo server <code>{{ settings.INTERNAL_ECHO_SERVER_NAME }}</code>. Command: <code>{{ settings.INTERNAL_ECHO_SERVER_COMMAND }} {{ ' '.join(settings.INTERNAL_ECHO_SERVER_ARGS) }}</code>.</span>
                </div>
            </div>
        </div>

        <!-- Save/Cancel Buttons -->
        <div class="row" style="margin-top: 30px;">
            <div class="col s12">
                 <button class="btn waves-effect waves-light blue darken-1" type="submit" style="margin-right: 10px;">
                     <i class="material-icons left">save</i>Save These Settings
                 </button>
                 <a href="{{ url_for('ui_root') }}" class="btn waves-effect waves-light grey lighten-1 black-text">
                      <i class="material-icons left">cancel</i>Cancel
                 </a>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Removed manualConfigSwitch and related UI functions from here.

        const healthCheckEnabledSwitch = document.getElementById('health_check_enabled');
        const healthCheckManualModeNote = document.getElementById('health-check-manual-mode-note-settingspage'); // Use unique ID

        const healthCheckFieldsToDisable = [
            document.getElementById('health_check_interval_seconds'),
            document.getElementById('health_check_failure_attempts'),
            document.getElementById('health_check_failure_retry_delay_seconds'),
            document.getElementById('auto_restart_on_failure')
        ];
        const useApiKeySwitch = document.getElementById('use_api_key');
        const apiKeyInput = document.getElementById('api_key');
        const logRefreshEnabledSwitch = document.getElementById('log_auto_refresh_enabled');
        const logRefreshIntervalInput = document.getElementById('log_auto_refresh_interval_seconds');

        function toggleBlock(element, show) {
            if (element) {
                element.style.display = show ? 'block' : 'none';
            }
        }

        function toggleFieldsDisabled(fields, isDisabled, alsoAffectOpacity = true) {
            fields.forEach(field => {
                if (field) {
                    field.disabled = isDisabled;
                    if (alsoAffectOpacity) {
                        const parentWrapper = field.closest('.input-field') || field.closest('.switch-part') || field.closest('.main-switch-row');
                        if (parentWrapper) {
                            parentWrapper.style.opacity = isDisabled ? 0.6 : 1;
                        }
                         if (field.type === 'checkbox' && field.parentElement.classList.contains('switch')) {
                            const switchContainer = field.closest('.switch');
                            if(switchContainer) switchContainer.style.opacity = isDisabled ? 0.6 : 1;
                        }
                    }
                }
            });
        }

        function updateHealthCheckFieldsUI() {
            const isHealthCheckEnabled = healthCheckEnabledSwitch.checked;
            toggleFieldsDisabled(healthCheckFieldsToDisable, !isHealthCheckEnabled);
            // Show note about manual mode if HC is on AND manual_config_mode_enabled (from settings passed to template)
            const isManualModeEnabledInSettings = {{ settings.manual_config_mode_enabled | tojson }}; // Get Python bool into JS
            toggleBlock(healthCheckManualModeNote, isHealthCheckEnabled && isManualModeEnabledInSettings);
        }

        function updateApiKeyUI() {
            if (apiKeyInput) {
                 toggleFieldsDisabled([apiKeyInput], !useApiKeySwitch.checked);
            }
        }

        function updateLogRefreshUI() {
            if (logRefreshIntervalInput) {
                toggleFieldsDisabled([logRefreshIntervalInput], !logRefreshEnabledSwitch.checked);
            }
        }
        
        if (healthCheckEnabledSwitch) {
            healthCheckEnabledSwitch.addEventListener('change', updateHealthCheckFieldsUI);
            updateHealthCheckFieldsUI();
        }
        if (useApiKeySwitch) {
            useApiKeySwitch.addEventListener('change', updateApiKeyUI);
            updateApiKeyUI();
        }
        if (logRefreshEnabledSwitch) {
            logRefreshEnabledSwitch.addEventListener('change', updateLogRefreshUI);
            updateLogRefreshUI();
        }
        // M.textareaAutoResize removed as no textareas are directly managed here now.
    });
</script>
{% endblock %}